/*
* name: slide.css
* version: v1.35
* update: .arrs全局样式;增加unable样式;禁止WP设备默认触屏事件；
* date: 2014-10-15
*/
.slide {
/*自定义*/
margin: 0 auto;
height: 650px;
background-color: #ececec;
/*默认*/
overflow: hidden;
position: relative;
-ms-touch-action: none;
touch-action: none;
}
/*图片位置默认自动宽度*/
.slide ul img{
max-width: none;
width: 100%;
height:auto;
}
/*图片位置绝对定位*/
.slide ul img.abs{
max-width: none;
width: 1900px;
height:562px;
position: absolute;
left: 50%;
margin-left: -950px;
top: 50%;
margin-top: -281px;
}
.slide_wrap {
position:relative;
width:100%;
height:100%;
overflow:hidden;
*zoom:1;
}
.slide_c {
float:left;
width: 100%;
height:100%;
overflow: hidden;
z-index: 1;
}
/*
* 自定义添加动画效果
*/
.slide_c{
height: 100%;
line-height: 0;
opacity: 0;
transition: opacity 1300ms linear;
-webkit-transition: opacity 1300ms linear;
}
.slide_c.active {
opacity: 1;
z-index: 10;
}
.slide_c a > img {
line-height: 0;
width: 100%;
position: relative;
transition: transform 5s ease;
-webkit-transition: transform 5s ease;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.slide_c.active a > img{
transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
/*
* 滚动广告标题
*/
.slide_tool {
position: absolute;
z-index: 98;
width: 100%;
height: 58px;
line-height: 58px;
margin-top: -58px;
background: rgba(0,0,0,.5);
}
/*
* 滚动广告标题-左侧工具
*/
.slide_nav {
position: absolute;
left: 50%;
bottom: 20px;
z-index: 999;
}
.slide_nav a{
display: inline-block;
overflow: hidden;
text-indent: 9999px;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 4px;
cursor: pointer;
background-color: #fff
}
.slide_nav a.on{
background-color: #0362b6
}
.flex-direction-nav{ width:46.875%; right:0; bottom:0; height:44px; position:absolute; z-index:10;}
.flex-direction-nav a{ display:block; width:10px; height:16px; text-indent:999px; overflow:hidden; position:absolute; bottom:14px;}
.flex-direction-nav a.flex-prev{ left:58px; background:url(arrow9.png) center no-repeat;}
.flex-direction-nav a.flex-next{ left:170px; background:url(arrow10.png) center no-repeat;}
.flex-direction-nav a.flex-prev:hover{ }
.flex-direction-nav a.flex-next:hover{ }
@-webkit-keyframes arrow {
0% { opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); }
33% { opacity: 1; }
66% { opacity: 1; }
100% { opacity: 0; -webkit-transform: translate3d(0px, 10px, 0px); }
}
.content{ width:46.875%; position:absolute; right:0; bottom:0; z-index:10; background:rgba(0,0,0,0.45); background:#171a92\9; filter:alpha(opacity=85);}
.content:before{ content:""; width:9px; height:88px; background:#23ac38; position:absolute; left:24px; top:0;}
.content-wr{ padding:45px 54px 0; height:140px;}
.conlist{ position:relative;}
.conlist li{ position:absolute; left:0; top:0; opacity:0; visibility:hidden; transform:translateX(0) skewX(-30deg); -webkit-transform:translateX(0) skewX(-30deg); -moz-transform:translateX(0) skewX(-30deg);}
.conlist li.on{ opacity:1; visibility:visible; transform:translateX(0) skewX(0); -webkit-transform:translateX(0) skewX(0); -moz-transform:translateX(0) skewX(0); transition:788ms;}
.conlist li h3{ color:#fff; font-size:30px; line-height:1.3; margin-bottom:16px;}
.conlist li p{ color:#fff; font-size:14px; height:50px;}
.conlist li a{ display:inline-block; line-height:1; color:#fff; padding-right:20px; /*background:url(../images/arrow.png) right center no-repeat;*/ position:relative;}
.conlist li a:before{ content:""; width:0%; height:1px; background:#fff; position:absolute; left:0; bottom:-1px; transition:300ms ease-in-out;}
.conlist li a:hover{ padding-right:24px;}
.conlist li a:hover:before{ width:100%;}
.muble{ height:44px; position:relative; background:#23ac38; padding-left:92px;}
.muble:before{ content:""; width:92.9%; height:100%;position:absolute; left:0; bottom:0;}
.num{ position:relative;}
.num b,.num i{ display:inline-block; float:left; color:#fff; font-size:16px; line-height:44px;font-weight: normal;}
.num i{ margin:0 14px;}
/*.blogo{ }
.blogo img{ position:relative; z-index:5;}
.blogo i{ display:block; width:181px; height:163px; background:url(../images/point.png) center no-repeat; position:absolute; right:73px; bottom:100px; transition:320ms;}
.flexbo{ position:fixed; left:85px; top:26.5%; padding-right:70px; padding-bottom:22px; z-index:10;}
*/
/*
* PcMode-max
*/
/*@media only screen and (min-width: 1200px) {
.slide{height: 560px!important}
.slide ul img{
max-width: none;
width: 1920px!important;
height:560px!important;
position: absolute;
left: 50%;
margin-left: -960px;
top: 50%;
margin-top: -280px;
}
}*/
/*
* PcMode-min
*/
/*@media only screen and (min-width: 1024px) and (max-width: 1200px) {
.slide_tool {
position: relative;
height: 100px;
margin: 0;
padding: 15px 0;
background-color: #fff
}
.section_xhdg{
padding-top: 0
}
.slide_nav{
height: 100px
}
.slide_nav_l {
padding: 65px 25px 0 58px;
}
.slide_nav_l a i {
top: 10px;
left: 20px;
font-size: 38px;
}
.slide_nav_l a strong {
top: 25px;
left: 68px;
font-size: 24px;
}
.slide_nav_r h3 {
font-size: 24px;
}
.slide_search{
height: 100px
}
.widget-search-hot {
padding: 15px 8%;
}
}*/
/*
* Pad
*/
/*@media only screen and (min-width: 640px) and (max-width: 1024px) {
.slide_tool {
position: relative;
height: 100px;
margin: 0;
padding: 15px 0;
background-color: #fff
}
.section_xhdg{
padding-top: 0
}
.slide_nav{
height: 100px
}
.slide_nav_l {
padding: 44px 20px 0 28px;
}
.slide_nav_l a i {
top: 10px;
left: 15px;
font-size: 28px;
}
.slide_nav_l a strong {
top: 21px;
left: 52px;
font-size: 18px;
}
.slide_nav_r h3 {
font-size: 18px;
}
.slide_search{
height: 100px
}
.widget-search-hot {
padding: 15px 8%;
}
}*/
/*
* phone
*/
@media only screen and (max-width: 640px) {
.slide_nav {
bottom: 2px;
}
.slide_nav a{
width: 6px;
height: 6px;
}
.arrs{
width: 35px;
height: 40px;
}
}